import React, { FC, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@/components/ProTable';
import styles from './index.less';
import useHoxModel from '../../../../useHoxModel';
import { ConfigPermissionRecordReturnType } from '@/pages/Authority/API';
import moment from 'moment';

interface Props {
  id?: number;
}
const ToolBar = () => {
  return <div></div>;
};

const OpenDoorRecord: FC<Props> = ({ id }) => {
  const actionRef = useRef<ActionType>();
  const { getDoorOpenRecord, info } = useHoxModel((model) => []);
  const columns: ProColumns<ConfigPermissionRecordReturnType>[] = [
    {
      title: '用户名',
      dataIndex: 'userName',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '卡号',
      dataIndex: 'userName',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '开门类型',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'message',
      valueEnum: {
        1: { text: '卡片开门' },
        2: { text: '人脸识别' },
        3: { text: '指纹开门' },
        4: { text: '钥匙开门' },
        5: { text: '密码开门' },
      },
    },
    {
      title: '开门时间',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'time',
      valueType: 'dateTime',
    },
  ];
  return (
    <div className={styles['container']}>
      <ProTable<ConfigPermissionRecordReturnType>
        columns={columns}
        request={async (params: { [key: string]: any }) => {
          let data = await getDoorOpenRecord({
            keyword: params.keyword || undefined,
            number: params.pageSize,
            id: id || Number(info?.id),
            page: params.current,
            startTime: params.startTime || moment().startOf('quarter').valueOf(),
            endTime: params.endTime || moment().endOf('quarter').valueOf(),
          });

          return await {
            data: data?.list || [],
            success: true,
            total: data?.count || 0,
          };
        }}
        rowKey="id"
        search={false}
        options={{
          search: {
            name: 'keyword',
          },
          fullScreen: false,
          setting: false,
        }}
        tableAlertRender={false}
        actionRef={actionRef}
        dateFormatter="string"
        headerTitle={false}
        toolBarRender={() => [<ToolBar />]}
      />
    </div>
  );
};
export default OpenDoorRecord;
